<template>
  <m-content class="practicing-wrapper">
    <template #header-right-text>
      <span class="text">{{ state.episode.episodeName }}</span>
      <div class="m-tooltip">
        <div class="value">
          <m-svg
            name="eye-close"
            v-if="!state.showEn"
            @click="state.showEn = true"
          ></m-svg>
          <m-svg name="eye" v-else @click="state.showEn = false"></m-svg>
        </div>
        <p class="tip">开关英语提示</p>
      </div>
    </template>
    <template #header-right-btn>
      <m-button type="primary" @click="toPage(secondaryRoutes.video)"
        >选择章节</m-button
      >
    </template>

    <div class="content-wrapper" v-if="currentSentence">
      <p class="text">
        {{ currentSentence.sentenceCn }}
      </p>
      <div class="sentence-box">
        <div class="en">
          <m-input
            v-model:value="state.inputValue"
            @keyup.enter="next"
            :class="{ error: !state.flag }"
          ></m-input>
          <span v-if="state.showEn" class="text">{{
            currentSentence.sentenceEn
          }}</span>
          <span v-else class="btn" @click="state.showEn = true">查看原文</span>
        </div>
        <div class="analysis">
          <p v-if="state.showAnalysis" class="text">
            解析：{{ currentSentence.sentenceAnalysis || '暂无解析' }}
          </p>
          <span v-else class="btn" @click="state.showAnalysis = true"
            >查看解析</span
          >
        </div>

        <div class="btn">
          <!-- <m-button type="primary" @click="next">下一个</m-button> -->
        </div>
      </div>
    </div>
  </m-content>
</template>

<script setup>
import { reactive, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { secondaryRoutes } from '@/router'
import globalApi from '@/http/api'
import globalMessage from '@/components/common/message/m-message'
import { compareSentence, setLocalData, getLocalData } from '@/utils/util'

const api = {
  getList: globalApi.sentence.getList
}

const router = useRouter()
const route = useRoute()
const localData = getLocalData()
const state = reactive({
  episode: {
    id: parseInt(route.query.episodeId),
    episodeName: route.query.episodeName,
    finishedCount: parseInt(localData[route.query.episodeId])
  },
  data: [],
  showEn: false,
  showAnalysis: true,
  inputValue: '',
  flag: true
})

const currentSentence = computed(() => {
  return state.data[state.episode.finishedCount]
})

function getList() {
  api.getList({ episodeId: state.episode.id }).then((res) => {
    state.data = res.data
  })
}
getList()

// 下一个
function next() {
  let flag = false
  if (compareSentence(state.inputValue, currentSentence.value.sentenceEn)) {
    // 正确
    flag = true
  } else {
    // 错误
    state.flag = false
    setTimeout(() => {
      state.flag = true
    }, 600)
  }
  if (flag) {
    let lastCount = state.episode.finishedCount + 1
    // 先存在浏览器本地缓存中
    setLocalData({
      [state.episode.id]: lastCount
    })
    // 全部完成直接返回
    if (lastCount === state.data.length) {
      globalMessage.success('本章节已全部完成，请重新选择章节')
      toPage(secondaryRoutes.video)
    } else {
      // 清空然后下一条数据
      state.episode.finishedCount = lastCount
      state.inputValue = ''
      state.showEn = false
      state.showAnalysis = false
    }
  }
}

function toPage(path) {
  router.push(path)
}
</script>
